<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";

    ctx.strokeStyle = 'red';
    ctx.fillStyle = 'pink';


    ctx.moveTo( 100 , 200);
    ctx.arc(100 , 200 , 100 , -Math.PI/3 , Math.PI/3);
    ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(300,200);
    ctx.arc( 300, 200, 100, -Math.PI/3, Math.PI/3 );
    ctx.closePath();
    ctx.fill();
</script>
</body>
</html>